<template>
  <div class="intelligence">
    <van-nav-bar title="刷脸认证" left-arrow @click-left="leftClick">
    </van-nav-bar>
    <div class="intelligence-main">
      <p class="intelligence-title-p">请上传身份证的正反面</p>

      <div class="intelligence-item">
        <div class="intelligence-item-left">
          <h5>头像面</h5>
          上传您的身份证头像面
        </div>
        <van-uploader :after-read="afterRead1">
          <img :src="itemList1.content" width="161" height="105" />
        </van-uploader>
      </div>
      <div class="intelligence-item">
        <div class="intelligence-item-left">
          <h5>国徽面</h5>
          上传您的身份证国徽面
        </div>
        <van-uploader :after-read="afterRead2">
          <img :src="itemList2.content" width="161" height="105" />
        </van-uploader>
      </div>
      <div class="intelligence-item">
        <div class="intelligence-item-left">
          <h5>手持面</h5>
          上传您的手持身份证面
        </div>
        <van-uploader :after-read="afterRead3">
          <img :src="itemList3.content" width="161" height="105" />
        </van-uploader>
      </div>
      <p class="intelligence-title-p margin-top" v-if="false">
        请核对您的个人信息
      </p>

      <div class="intelligence-d-input margin-top" v-if="false">
        <p>真实姓名</p>
        <input type="text" v-model="name" placeholder="请输入真实姓名" />
      </div>
      <div class="xian" v-if="false"></div>
      <div class="intelligence-d-input" v-if="false">
        <p>身份证号</p>
        <input type="text" v-model="cId" placeholder="请输入本人身份证号" />
      </div>
      <div class="xian" v-if="false"></div>
      <div class="next" @click="nextClick">提交</div>
    </div>
  </div>
</template>
<script>
import { format } from "echarts";
import { getApiIntelligenceNameImage } from "../network/ApiServe";
export default {
  name: "IntelligenceName",
  created() {
    this.userId = localStorage.getItem("userId");
  },
  data() {
    return {
      name: "",
      cId: "",
      itemList1: {
        content: require("../assets/image/img_intelligence_item1.png"),
      },
      itemList2: {
        content: require("../assets/image/img_intelligence_item2.png"),
      },
      itemList3: {
        content: require("../assets/image/img_manual_audit_itme3.png"),
      },
    };
  },
  methods: {
    leftClick() {
      this.$router.back(-1);
    },
    afterRead1(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      this.itemList1 = file;
    },
    afterRead2(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      this.itemList2 = file;
    },
    afterRead3(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      this.itemList3 = file;
    },
    nextClick() {
      console.log("nextClick");
      let _this = this;
      let formData = new FormData();
      formData.append("userId", _this.userId);
      formData.append("faceFile", _this.itemList1.file);
      formData.append("backFile", _this.itemList2.file);
      formData.append("handFile", _this.itemList3.file);
      if (
        _this.itemList1.file != null &&
        _this.itemList2.file != null &&
        _this.itemList3.file != null
      ) {
        getApiIntelligenceNameImage(formData)
          .then((res) => {
            if (res.resp_code === "000000") {
              _this.$toast("上传" + res.resp_message);
              _this.$router.back(-1);
              return;
            } else {
              _this.$toast(res.resp_message);
            }
            console.log(res, "getApiIntelligenceNameImage");
          })
          .catch((err) => {
            console.log(err, "getApiIntelligenceNameImage");
          });
      } else {
        this.$toast("请上传照片");
      }
    },
  },
};
</script>
<style scoped>
.intelligence >>> .van-nav-bar .van-icon {
  color: #444;
}

.intelligence-main {
  background-color: #fff;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 48px;
}
.intelligence-title-p {
  font-size: 15px;
  color: #444;
  padding-top: 20px;
}
.intelligence-item {
  margin-top: 15px;
  height: 145px;
  background-color: #f7f8fa;
  border-radius: 8px;
  padding: 15px;
  font-size: 13px;
  color: #adadad;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.intelligence-item-left {
  padding-bottom: 48px;
}
.intelligence-item-left h5 {
  font-size: 19px;
  color: #444;
  padding-bottom: 10px;
}
.van-cell-group {
  margin-top: 26px;
}
.intelligence-d-input {
  display: flex;
  font-size: 15px;
  color: #444;
  align-items: center;
  margin-top: 20px;
  padding-bottom: 15px;
}
.intelligence-d-input input {
  margin-left: 20px;
  border: 0px;
}
.xian {
  height: 1px;
  background-color: #f7f7f7;
}
.margin-top {
  margin-top: 30px;
}
.next {
  margin-top: 50px;

  background-color: var(--app-primary-theme-color);
  color: #fff;
  font-size: 15px;
  height: 40px;
  line-height: 40px;

  border-radius: 4px;
  text-align: center;
}
</style>